<template>
	<view class="content bg-img bg-mask ">
		<u-navbar :title="i18n.zhibu.i1" background="rgba(0,0,0,0)" back-icon-color="#fff" title-color="#fff"></u-navbar>

		<view class="margin-bottom-sm" :style="[{ height: 100 + 'rpx' }]" v-if="fly == 1">
			<view style="color: #FFFFFF; height: 100rpx; border-bottom: 1rpx solid #727376;" class="f30 flex justify-around align-center ">
				<view class="flex flex-direction align-center">
					<text>{{i18n.zhibu.i7}}</text>
					<text>
						{{ son_ability ? son_ability : 0 }}
						<text style="color: rgb(73, 251, 221);" class="margin-left-xs">T</text>
					</text>
				</view>

				<view class="flex flex-direction align-center">
					<text>{{i18n.zhibu.i8}}</text>
					<text>
						{{ teamAbility ? addd(teamAbility) : 0 }}
						<text style="color: rgb(73, 251, 221);" class="margin-left-xs">T</text>
					</text>
				</view>
				<view class="flex flex-direction align-center">
					<text>{{i18n.zhibu.i9}}</text>
					<text>
						{{ v4_dynamic_ability ? addd(v4_dynamic_ability) : 0 }}
						<text style="color: rgb(73, 251, 221);" class="margin-left-xs">T</text>
					</text>
				</view>
			</view>
		</view>

		<view class="" :style="[{ height: 70 + 'rpx' }]" v-else></view>

		<view class="scroll ">
			<block>
				<view class="flex head  f30">
					<view class="f-1 flex justify-center f30 flex align-center">
						<text class="text-white block r flex align-center justify-center  f26 " style="background-color: #04BD9E; line-height: 1 ;padding:5rpx;">
							{{ i18n.zhibu.i6 }}
						</text>
						<text class="margin-left-xs">{{ i18n.zhibu.i2 }}</text>
					</view>
					<text class="f-1 flex justify-center">{{ i18n.zhibu.i3 }}</text>
					<text class="f-1 flex justify-center">{{ i18n.zhibu.i4 }}</text>
					<text class="f-1 flex justify-center">{{ i18n.zhibu.i5 }}</text>
				</view>
				<view v-for="(item, index) in data" :key="index" class="padding-tb-sm  list f30 r flex  ">
					<view class="f-1 flex justify-center align-center f28" v-if="item.level != 5">
						<text class="text-white block r flex align-center justify-center   cuIcon-vip  " style="background-color: #04BD9E; padding: 5rpx; line-height: 1;">
							{{ item.level }}
						</text>
						<text class="margin-left-xs">{{ addrr(item.address) }}</text>
					</view>
					<view class="f-1 flex justify-center align-center f26" v-else>
						<view
							class="text-white block r flex align-center justify-center  "
							style="background-color: #04BD9E;padding: 2 5rpx; line-height: 1 ;  white-space: nowrap;"
						>
							<image src="../../static/head.png" mode="aspectFill" style="width: 35rpx; height: 35rpx;"></image>
						</view>
						<!-- 	<view
							class="text-white block r flex align-center justify-center f16 margin-left-xl  "
							style="background-color: #04BD9E; width: 100%; height: 40rpx; padding: 8rpx  8rpx;"
						>
							<image src="../../static/head.png" mode="aspectFill" style="width: 40rpx; height: 40rpx;"></image>
							<text class="margin-left-xs">天使</text>
						</view> -->
						<text class="margin-left-xs">{{ addrr(item.address) }}</text>
					</view>
					<!-- <view
					    v-else
						class="text-white block r flex align-center justify-center f16 margin-left-xl  "
						style="background-color: #04BD9E; width: 100%; height: 40rpx; padding: 8rpx  8rpx;"
					>	
						<image src="../../static/head.png" mode="aspectFill" style="width: 40rpx; height: 40rpx;"></image>
						<text class="margin-left-xs">天使</text>
					</view>
 -->
					<text class="f-1 flex justify-center">
						{{ item.ability }}
						<text style="color: rgb(73, 251, 221);" class="margin-left-xs">T</text>
					</text>
					<text class="f-1 flex justify-center">{{ item.son }}</text>
					<text class="f-1 flex justify-center">
						{{ item.teamAbility }}
						<text style="color: rgb(73, 251, 221);" class="margin-left-xs">T</text>
					</text>
				</view>
			</block>
			<w-loading :text="i18n.pec.i18" mask="true" click="true" ref="loading"></w-loading>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			CustomBar: this.CustomBar,
			show: false,
			data: [],
			page: 1,
			rows: 1000,
			total: false,
			teamAbility: '',
			v4_dynamic_ability: '',
			son_ability: '',
			fly: '',
		};
	},
	computed: {
		i18n() {
			return this.$t('message');
		},
	},
	onLoad(e) {
		var obj = setInterval(() => {
			if (window.tronWeb) {
				clearInterval(obj);

				this.show = true;
				this.fly = uni.getStorageSync('fly');
				var dynamic_ability = uni.getStorageSync('dynamic_ability');
				this.name(dynamic_ability);
				this.dynamic_ability = uni.getStorageSync('dynamic_ability');
				this.getData();
			} else {
				this.show = false;
			}
		}, 20);
	},
	methods: {
		addrr(e) {
			console.log('e :>> ', e);
			if (e) {
				return e.substring(0, 2) + '**' + e.substring(e.length - 2);
			}
		},
		addd(e) {
			if (e) {
				return Number(e).toFixed();
			}
		},

		async name(dynamic_ability) {
			this.$refs.loading.open();

			let obj = {
				page: this.page,
				rows: this.rows,
			};
			const res = await this.$u.post('/index.php/api/pec/teamAbility', obj, {
				token: uni.getStorageSync('token'),
			});

			setTimeout(() => {
				this.$refs.loading.close();

				if (res.data.total) {
					this.data = res.data.list;
					this.teamAbility = res.data.teamAbility;
					this.son_ability = res.data.son_ability;

					if (!dynamic_ability) {
						this.v4_dynamic_ability = 0;
					} else {
						this.v4_dynamic_ability = Number(dynamic_ability) - Number(res.data.teamAbility) - Number(res.data.son_ability);
					}
				} else {
					this.total = true;
				}
			}, 500);
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;

	background-image: url(../../static/gern.png);
	.scroll {
		height: calc(100vh - 80rpx);
		overflow: scroll;
	}
	.head {
		margin-top: 90rpx;
		color: #f0f0f0;
		width: 702rpx;
		margin: 0 auto;
		margin-bottom: 50rpx;
	}
	.list {
		width: 702rpx;
		background: rgba(14, 16, 16, 0.44);
		color: #b3b3b3;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}
}
</style>
